//less的使用  @... 作为变量  $可以传递属性的值
@w:100px;
@c:clas1;
@color:red;
@color-g:green;
@c2:clas2;
#div1{
  .@{c}{
    height: @w;
    width: $height;
    background-color: @color;
  }
}
#div2{
  width: 2*@w;
  height: 3*@w;
  background-color: aqua;
  >.@{c2}{
    width: @w;
    height: @w;
    background: @color-g;
  }
  // & 表示父元素选择器 相当于大括号外面的元素
  &:hover{
    height: 2*@w;
    transition: all 1s; 
  }
}
.mymargin(){  //相当于一个公共样式 - 必须要加点
  margin-top: 10px;
}
#div3:extend(#div2){   //继承-相当于分组选择器
  .mymargin();
}
// 混合函数的使用  可以使用默认值
.funTest(@w,@h:200px,@bg)
{
  background-color: @bg;
  width: @w;
  height: @h;
}
#div4{
  .funTest(100px,200px, @bg:red);
  margin-top: 10px;
}
